<template>
  <!-- div普通元素也可以绑定ref -->
  <!-- ref如果是绑定在组件中的,那么通过this.$refs.refname获取到的是一个组件对象 -->
  <!-- ref如果是绑定在普通的元素中,那么通过this.$ref.refname获取到的是一个元素对象 -->
  <!-- 这里取的时候用的this,说明只会取到这个组件内部的refname -->
  <div ref="wrapper" >
    
      <slot></slot>

  </div>
</template>
<script>
import BScroll from "better-scroll";

export default {
  // props:{
  //   probeType:{
  //     type:Number,
  //     default:0
  //   },
  //   pullUpLoad: {
  //       type: Boolean,
  //       default: false
  //     }
  // },
  data() {
    return {
      scroll: null,
    };
  },
  mounted() {
    // 1.创建BScroll对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true,
      // probeType: this.probeType,
      // pullUpLoad: this.pullUpLoad
    });
    // 2.监听滚动的位置
    //  if(this.probeType===2||this.probeType===3){
    //        this.scroll.on('scroll',(position)=>{
    //     // console.log(position)
    //     this.$emit('scroll',position)
    //     })
    //   }
    this.scroll.on("scroll", (position) => {
      console.log(position)
      // this.$emit("scroll", position);
    });
    // 3.监听上拉事件(监听scroll滚动到底部)
    // if(this.pullUpLoad){
    //   this.scroll.on('pullingUp',()=>{
    //     console.log('滚动到底部')
    //     this.$emit('pullingUp')
    //   })
    // }
    // this.scroll.on("pullingUp", () => {
    //   console.log("滚动到底部");
    //   this.$emit("pullingUp");
    // });
  },
  methods: {
    scrollTo(x, y, time = 1000) {
      this.scroll && this.scroll.scrollTo(x, y, time);
    },
    // finishPullUp() {
    //   this.scroll && this.scroll.finishPullUp();
    // },
    refresh() {
      // console.log('refresh')
      this.scroll && this.scroll.refresh();
    },
    getScrollY() {
      return this.scroll ? this.scroll.y : 0;
    },
  },
};

// 解决首页中better-scroll可滚动区域的问题:
//      Better-scroll在决定有多少区域可以滚动时,是根据scrollHeight属性决定
//      但是我们的首页中,刚开始在计算scrollHeight属性时,是没有将图片计算在内的
//      所以计算出来的高度是错误的
//      后来图片加载进来之后有了新的高度,但是scrollHeight属性并没有进行更新
//      所以滚动出现了问题
// 如何解决这个问题?
//      监听每一张图片是否加载完成,只要有一张图片加载完成了,执行一次refresh()
// 如何监听图片加载完成呢?
//      原生的js监听图片:img.onload=function(){}
//      vue中监听:@load="方法"
// 调用scroll的refresh
// vuex是管理状态的,事件总线是用来管理事件的
// 如何将GoodsListItem.vue中的事件传入到home.vue中
/*因为涉及到非父子组件的通信,所以我们这里选择了事件总线
            bus->总线
            vue.prototype.$bus=new Vue()
            thsi.$bus.$emit('事件名称',参数)
            this.$bus.$on('事件名称',回调函数(参数))*/
// 对于refresh非常频繁的问题,进行防抖操作
/* 防抖debounce/节流throttle
              防抖函数起作用的过程: 
                如果我们直接执行refresh,那么refresh函数会被执行30次
                可以将refresh函数传入到debounce函数中,生成一个新的函数
                之后在调用非常频繁的时候,就会使用新生成的函数
                而新生成的函数,并不会非常频繁的调用,如果下一次执行来的非常快,那么会将上一次取消掉
          */
//tabControl的吸顶效果
// 获取到tabControl的offsetTop
// 必须知道滚动到多少时,才会有吸顶效果,这个时候就需要获取tabControl的offsetTop
// 但是,如果直接在mounted中获取tabControl的offsetTop,那么值不正确
// 如何获取正确的值?
//    监听HomeSwiper中img的加载完成
//    加载完成后,发出事件,在Home.vue中,获取正确的值
// 补充:
//      为了不让HomeSwiper多次发出事件
//      可以使用isLoad的变量进行状态的记录
// 注意:这里不进行多次调用和debounce的区别
// 监听滚动,动态的改变tabControl的样式
// 问题 样式的改变tabControl的样式时,会出现两个问题
//        问题一:下面的商品内容,会突然上移
//        问题二:tabControl虽然设置了fixed,但是也随着Better-Scroll一起滚出去了
// 其他方案来解决停留问题
//        在最上面,多复制了一份PlaceHolderTabControl组件对象,利用它来实现停留效果
//        当用户滚动到一定位置时,PlaceHolderTabControl显示出来
//        当用户滚动没有达到一定位置时PlaceHolderTabControl隐藏起来
// 让home保持原来的状态
//        离开时,保存一个位置信息saveY
//        进来时,将位置设置为原来保存的位置saveY信息即可
//          注意:最好回来时,进行一次refresh
</script>
<style scoped>
</style>
